import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Spin, Radio, Modal } from 'antd';
import styles from './style/index.less';
import TimeSwitch from './components/TimeSwitch';
import Tab from './components/Tab';
import EchartsPie from './components/EchartsPie';
import EchartsTab from './components/EchartsTab';
import EchartsBar from './components/EchartsBar';
import EchartsBarLine from './components/EchartsBarLine';

@connect(({ hotlineManagement }) => ({
  tabsModule: hotlineManagement.tabsModule,
  echartsModule: hotlineManagement.echartsModule,
  loading: hotlineManagement.loading
}))
class HotlineManagement extends Component {
  state = {
    tabKey: 'complain',
    visible: false,
    dateKey: 'year'
  }
  // echarts项配置
  echartsConfig = {
    situationAnalysis: {
      title: '热线情况分析',
      options: ['年', '月'],
      color: '#64AAEA',
    },
    hotlineCompletion: {
      title: '热线工单完成率',
      options: ['年', '月'],
      color: ['#FFB900', '#A668FB', '#00B7EE'],
    },
    hotlinePercentage: {
      title: '热线占比情况',
      options: ['年', '月', '日'],
      color: ['#975FE5', '#64AAEA', '#FBD437', '#4482FF']
    },
    reflectCategory: {
      title: '反映类别',
      options: ['年', '月', '日'],
      color: ['#A4E32A', '#E7472C', '#00CEDB', '#F04864', '#975FE5', '#4ECB73', '#FBD437', '#4482FF']
    },
    complainAdvisory: {
      title: '用户投诉咨询',
      options: ['年', '月'],
      color: '#A39FE3',
      kind: {
        complain: '投诉',
        advisory: '咨询'
      }
    },
    complaintProps: {
      title: '用户投诉占比分析',
      options: ['年', '月', '日'],
      color: ['#4A8FFF', '#E7472C', '#00CEDB']
    }
  }

  componentDidMount() {
    this.initAllData();
  }

  // 获取页面数据
  initAllData = () => {
    this.props.dispatch({
      type: 'hotlineManagement/fetchData',
      payload: {}
    });
  }

  // 右上角  年/更多
  dateChange = (e) => {
    const value = e.target.value;
    // 点击更多 弹出时间选择框
    this.setState({ visible: value === 'more' ? true : false, dateKey: value });
  }

  getEcharts = () => {
    const { echartsModule } = this.props;
    const { dateKey } = this.state;
    // 根据 echarts类型进行区分
    const echartsType = {
      pie: ['hotlinePercentage', 'reflectCategory', 'complaintProps'],
      bar: ['situationAnalysis'],
      barLine: ['hotlineCompletion'],
      barTab: ['complainAdvisory']
    }
    // 初始化一个空组件
    let Element = null;
    // 将每个组件的数据过滤出来
    const echartsPie = echartsModule.filter(x => echartsType.pie.includes(x.name));
    const echartsBarTab = echartsModule.filter(x => echartsType.barTab.includes(x.name));
    const echartsBarLine = echartsModule.filter(x => echartsType.barLine.includes(x.name));
    const echartsBar = echartsModule.filter(x => echartsType.bar.includes(x.name));
    return (
      echartsModule.map(ele => {
        const { name } = ele;
        const { title } = this.echartsConfig[name];
        // 按照类型进行组件渲染
        switch (name) {
          case 'situationAnalysis':
            Element = (<EchartsBar key={name} echartsModule={echartsBar} />)
            break;
          case 'hotlineCompletion':
            Element = (<EchartsBarLine key={name} echartsModule={echartsBarLine} />)
            break;
          case 'complainAdvisory':
            Element = (<EchartsTab key={name} echartsModule={echartsBarTab} />);
            break;
          default:
            Element = (<EchartsPie key={name} val={name} echartsModule={echartsPie} />);
            break;
        }
        return (
          <Col span={8} className={styles.echarts_box} key={ele.name}>
            <Spin spinning={false} tip="加载中...">
              <div className={styles.echarts_title}>
                <div className={styles.echarts_title_left}>
                  {title}
                </div>
                <div className={styles.echarts_title_right}>
                  <div>
                    <Radio.Group key={ele.name} size="small" onChange={this.dateChange} defaultValue={dateKey} buttonStyle="solid">
                      <Radio.Button value="year">年</Radio.Button>
                      <Radio.Button value="more" onClick={() => { this.setEchartsKey(ele.name) }}>更多</Radio.Button>
                    </Radio.Group>
                  </div>
                </div>
              </div>
              {Element}
            </Spin>
          </Col>
        )
      })
    )
  }

  setEchartsKey = (echartsKey) => {
    this.setState({ echartsKey, visible: true });
  }

  // 获取选择的具体时间
  getDetailTime = (timeType, timeNum) => {
    console.log(timeType, timeNum);
  }

  // 生成时间弹框
  getTimeSwitch = () => {
    const { echartsKey } = this.state;
    const { options } = echartsKey && this.echartsConfig[echartsKey];
    const params = {
      options,
      getDetailTime: this.getDetailTime
    }
    return (
      <Modal
        title="选择日期"
        width={600}
        visible={this.state.visible}
        onCancel={this.handleCancel}
        footer={null}
        destroyOnClose={true}
      >
        <TimeSwitch {...params} />
      </Modal>
    )
  }

  // 关闭日期选择框
  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };

  render() {
    return (
      <div className={styles.container}>
        {/* tab栏 */}
        <div className={styles.hotline_tap}>
          <Tab tabsModule={this.props.tabsModule} />
        </div>
        {/* echarts图 */}
        <Row className={styles.hotline_echarts}>
          {this.getEcharts()}
        </Row>
        {/* 时间弹出框 */}
        {this.state.echartsKey && this.getTimeSwitch()}
      </div>
    );
  }
}
export default HotlineManagement;
